<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='global-property-'>/**
</span> * @ignore
 * TabBar for KISSY.
 * @author yiminghe@gmail.com
 */
KISSY.add(&quot;tabs/bar&quot;, function (S, Toolbar, BarRender, undefined) {
<span id='KISSY-Tabs-Bar'>    /**
</span>     * tab bar container for tab tabs.xclass: 'tabs-bar'.
     * @class  KISSY.Tabs.Bar
     * @extends KISSY.Toolbar
     */
    var TabBar = Toolbar.extend({
        bindUI: function () {
            var self = this;
            self.on(&quot;afterSelectedChange&quot;, function (e) {
                if (e.newVal &amp;&amp; e.target.isTabsTab) {
                    self.set(&quot;selectedTab&quot;, e.target);
                }
            });
        },

        syncUI: function () {
            var bar = this,
                children = bar.get(&quot;children&quot;);
            S.each(children, function (c) {
                if (c.get(&quot;selected&quot;)) {
                    bar.setInternal(&quot;selectedTab&quot;, c);
                    return false;
                }
                return undefined;
            });
        },

        handleKeyDownInternal: function (e) {
            var self = this;
            var current = self.get('selectedTab');
            var next = self.getNextItemByKeyDown(e, current);
            if (typeof next === 'boolean') {
                return next;
            } else {
                next.set('selected', true);
                return true;
            }
        },

        _onSetSelectedTab: function (v, e) {
            var prev;
            if (v) {
                if (e &amp;&amp; (prev = e.prevVal)) {
                    prev.set(&quot;selected&quot;, false);
                }
                v.set(&quot;selected&quot;, true);
            }
        },

        _onSetHighlightedItem: function (v,e) {
            var self = this;
            self.callSuper(v,e);
            if (self.get('changeType') == 'mouse') {
                self._onSetSelectedTab.apply(self, arguments);
            }
        }

    }, {
        ATTRS: {
            selectedTab: {
            },
            changeType: {
                value: &quot;click&quot;
            },
            defaultChildCfg: {
                value: {
                    xclass: 'tabs-tab'
                }
            },
            xrender: {
                value: BarRender
            }
        },
        xclass: 'tabs-bar'
    });

<span id='KISSY-Tabs-ChangeType'>    /**
</span>     * tabs change type
     * @enum {String}  KISSY.Tabs.ChangeType
     */
    TabBar.ChangeType = {
<span id='KISSY-Tabs-ChangeType-property-CLICK'>        /**
</span>         * click
         */
        CLICK: &quot;click&quot;,
<span id='KISSY-Tabs-ChangeType-property-MOUSE'>        /**
</span>         * mouse
         */
        MOUSE: &quot;mouse&quot;
    };

    return TabBar;
}, {
    requires: ['toolbar', './bar-render']
});</pre>
</body>
</html>
